<script setup>

import * as echarts from 'echarts';
import {onBeforeUnmount, onMounted, ref} from "vue";
import {post, get} from "@/net/index.js";

// 现有用户数
let userNum = ref("");
// 现有接口数
let interfaceNum = ref("");
// 已发放次数
let issuedTimes = ref("");
// 累计调用
let accumulatedCalls = ref("");
let interfaceName = ref()
let interfaceCalledNum = ref()

// 获取现有用户数
const getUserNum = () => {
    post('/api/user/list/page/',
        {
            current: 1,
            pageSize: 10000
        },
        (data) => {
            userNum.value = data.total;
            getInterfaceNum();
        }
    );
}
// 获取现有接口数
const getInterfaceNum = () => {
    post('/api/interfaceInfo/list/page/',
        {
            current: 1,
            pageSize: 1000
        },
        (data) => {
            interfaceNum.value = data.total;
            getIssuedTimes();
        }
    );
}
// 获取已发放次数
const getIssuedTimes = () => {
    get("/api/userInterfaceInfo/getIssuedTimes",
        (data) => {
            issuedTimes.value = data;
            getAccumulatedCalls();
        }
    );
}
// 获取累计调用
const getAccumulatedCalls = () => {
    get("/api/userInterfaceInfo/getAccumulatedCalls",
        (data) => {
            accumulatedCalls.value = data;
            initPieChart();
        }
    );
}
// 初始化饼状图
const initPieChart = () => {
    get('/api/userInterfaceInfo/getNumberOfUserCalls',(data) => {

        var chartDom = document.getElementById('pie-chart-1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '各个用户的调用次数情况',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '总计',
                    type: 'pie',
                    radius: '70%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);
        document.getElementById('pie-chart-1').setAttribute('_echarts_instance_', '');

        initHistogram();
    })
}
// 初始化柱状图
const initHistogram = () => {
    get('/api/userInterfaceInfo/getNumberOfInterfaceCalls',(data) => {

        interfaceName.value = data.map((item) => {
            return item.name;
        });

        interfaceCalledNum.value = data.map((item) => {
            return item.value;
        });

        var chartDom = document.getElementById('histogram-1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: interfaceName.value,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '总计',
                    type: 'bar',
                    barWidth: '60%',
                    data: interfaceCalledNum.value
                }
            ]
        };

        myChart.setOption(option);
        document.getElementById('histogram-1').setAttribute('_echarts_instance_', '');

        initLineChart();
    })
}
// 初始化折线图
const initLineChart = () => {
    var chartDom = document.getElementById('lineChart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: interfaceName.value
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: interfaceCalledNum.value,
                type: 'line'
            }
        ]
    };

    myChart.setOption(option);
    document.getElementById('lineChart').setAttribute('_echarts_instance_', '');

}

onMounted(() => {
    getUserNum();
})
</script>

<template>
    <div class="container">
        <!--第一层-->
        <div class="dataBox">
            <div class="dataShowCard">
                <div style="margin-left: 20px;">
                    <el-icon :size="90" color="#ffffff">
                        <User/>
                    </el-icon>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: space-between;margin-right: 30px">
                    <div style="margin-bottom: 10px;">
                        <span style="font-size: 25px;color: white;">现有用户</span>
                    </div>
                    <div style="text-align: center">
                        <span style="font-size: 25px;color: white;margin-top: 30px;" v-text="userNum"></span>
                    </div>
                </div>
            </div>
            <div class="dataShowCard" style="background: #67c23a">
                <div style="margin-left: 20px;">
                    <el-icon :size="90" color="#ffffff">
                        <Open/>
                    </el-icon>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: space-between;margin-right: 30px">
                    <div style="margin-bottom: 10px;">
                        <span style="font-size: 25px;color: white;">现有接口</span>
                    </div>
                    <div style="text-align: center">
                        <span style="font-size: 25px;color: white;margin-top: 30px;" v-text="interfaceNum"></span>
                    </div>
                </div>
            </div>
            <div class="dataShowCard" style="background: #e6a23c">
                <div style="margin-left: 20px;">
                    <el-icon :size="90" color="#ffffff">
                        <Tickets/>
                    </el-icon>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: space-between;margin-right: 30px">
                    <div style="margin-bottom: 10px;">
                        <span style="font-size: 25px;color: white;">已发放次数</span>
                    </div>
                    <div style="text-align: center">
                        <span style="font-size: 25px;color: white;margin-top: 30px;" v-text="issuedTimes"></span>
                    </div>
                </div>
            </div>
            <div class="dataShowCard" style="background: #f56c6c">
                <div style="margin-left: 20px;">
                    <el-icon :size="90" color="#ffffff">
                        <Finished/>
                    </el-icon>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: space-between;margin-right: 30px">
                    <div style="margin-bottom: 10px;">
                        <span style="font-size: 25px;color: white;">累计调用</span>
                    </div>
                    <div style="text-align: center">
                        <span style="font-size: 25px;color: white;margin-top: 30px;" v-text="accumulatedCalls"></span>
                    </div>
                </div>
            </div>
        </div>
        <!--第二层-->
        <div class="layer-2">
            <!--第三张图表-->
            <div class="chart-1">
                <div id="pie-chart-1">

                </div>
            </div>
            <!--第四张图表-->
            <div class="chart-1">
                <div id="histogram-1">

                </div>
            </div>
        </div>
        <!--第三层-->
        <div class="layer-1">
            <div id="lineChart">

            </div>
        </div>
    </div>
</template>

<style scoped>

.container {
    width: 90%;
    height:900px;
    margin: 0 auto;
}

.layer-1 {
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
}

.layer-2 {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
}

.chart-1 {
    width: 50%;
    height: 400px;
}
#pie-chart-1 {
    width: 732px;
    height: 400px;
}

#histogram-1 {
    width: 732px;
    height: 400px;
}

#lineChart {
    width: 100%;
    height: 250px;
}

.dataBox {
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.dataShowCard {
    width: 80%;
    height: 120px;
    margin: 10px;
    background: #4095e5;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>